import { useState } from "react";
import QuestionCard from "../../components/QuestionCard";
import styles from "./common.module.scss";
import { useSearchParams } from "react-router-dom";
import { useRequest, useTitle } from "ahooks";
import Title from "antd/es/typography/Title";
import { Button, Empty, message, Space, Table, Tag, Modal, Spin } from "antd";

import { ExclamationOutlined } from "@ant-design/icons";
import ListSearch from "../../components/ListSearch";
import useLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import ListPagination from "../../components/ListPage";
import {
  deleteQuestionService,
  updateQuestionService,
} from "../../service/question";
const { confirm } = Modal;

export default function Trash() {
  useTitle("问卷-回收站");
  const {
    data = {},
    loading,
    refresh,
  } = useLoadQuestionListData({ isDeleted: true });
  const { list = [], total = 0 } = data;
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const tableColumns = [
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      render: (isPublished: boolean) =>
        isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>,
    },
    {
      title: "答卷",
      dataIndex: "answerCount",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
    },
  ];
  function del() {
    confirm({
      title: "确认彻底删除该问卷",
      icon: <ExclamationOutlined />,
      content: "删除以后不可以找回",
      onOk: deleteQuestion,
      centered: true,
      onCancel: () => {},
    });
  }
  const { loading: revocerLoading, run: recover } = useRequest(
    async () => {
      for await (const id of selectedIds) {
        await updateQuestionService(id, { isDeleted: false });
      }
    },
    {
      manual: true,
      onSuccess() {
        message.success("恢复成功");
        setSelectedIds([]);
        refresh();
      },
    }
  );
  const { loading: delLoading, run: deleteQuestion } = useRequest(
    async () => await deleteQuestionService(selectedIds),
    {
      manual: true,
      onSuccess() {
        message.success("删除成功");
        setSelectedIds([]);
        refresh();
      },
    }
  );
  const TableElem = (
    <>
      <div style={{ marginBottom: "16px" }}>
        <Space>
          <Button
            type="primary"
            disabled={selectedIds.length == 0}
            onClick={recover}
            loading={revocerLoading || delLoading}
          >
            恢复
          </Button>
          <Button
            danger
            disabled={selectedIds.length == 0}
            onClick={del}
            loading={revocerLoading || delLoading}
          >
            删除
          </Button>
        </Space>
      </div>
      <Table
        dataSource={list}
        columns={tableColumns}
        pagination={false}
        rowKey={(q: any) => q._id}
        loading={revocerLoading || delLoading}
        rowSelection={{
          type: "checkbox",
          onChange: (selectedRowKeys) => {
            console.log("selectedRowKeys", selectedRowKeys);
            setSelectedIds(selectedRowKeys as string[]);
          },
        }}
      />
    </>
  );
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.content}>
        {/* {loading && (
          <div style={{ textAlign: "center" }}>
            <Spin />
          </div>
        )} */}
        <Spin spinning={loading}>
          {!loading && list.length == 0 && <Empty description="暂无数据" />}
          {list.length > 0 && TableElem}
        </Spin>
      </div>
      <div className={styles.footerF}>
        <ListPagination total={total} />
      </div>
    </>
  );
}
